<template>
  <div>
    <el-row type="flex" class="row-bg">
      <el-col :span="6"><div class="grid-content bg-purple"> </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" >
        <router-link :to="'/account/coach'">
          <el-button size="mini" round icon="el-icon-arrow-left"  type="info"  style="margin-left: 400px">返回</el-button>
        </router-link>
      </div></el-col>
      <p></p>
    </el-row>

    <el-container>
      <el-header>教练信息</el-header>
      <el-container>
        <el-aside width="200px">

          <div style="margin-top: 40px">
            <img :src="'http://rj0387v46.hn-bkt.clouddn.com/'+coach.img" width="200px" align="center">
            <p align="center">{{coach.name}}</p>
            <p align="center" style="color:red;">{{coach.levelName}}</p>
          </div>
        </el-aside>
        <el-container>
          <el-main>
            <table border="1" cellspacing="0" style="margin-top: 40px">
              <tr>
                <th width="200px" align="center" height="40px" >
                  姓名
                </th>
                <th width="300px" align="center" height="40px" >
                  {{coach.name}}
                </th>
                <th width="200px" align="center" height="40px" >
                  擅长
                </th>
                <th width="300px" align="center" height="40px" >
                  {{coach.goodAt}}
                </th>
              </tr>
              <tr>
                <th width="200px" align="center" height="40px" >
                  电话
                </th>
                <th width="200px" align="center" height="40px" >
                  {{coach.tel}}
                </th>
                <th width="200px" align="center" height="40px" >
                  所属场馆
                </th>
                <th width="200px" align="center" height="40px" >
                  {{coach.gymName}}
                </th>
              </tr>
              <tr>
                <th width="200px" align="center" height="40px" >
                  性别
                </th>
                <th width="200px" align="center" height="40px"  v-if="coach.sex==0">
                  男
                </th>
                <th width="200px" align="center" height="40px"  v-if="coach.sex==1">
                  女
                </th>
                <th width="200px" align="center" height="40px" >
                  创建时间
                </th>
                <th width="200px" align="center" height="40px" >
                  {{coach.createTime}}
                </th>
              </tr>
              <tr>
                <th width="200px" align="center" height="40px" >
                  角色
                </th>
                <th width="200px" align="center" height="40px"  >
<!--                  <span v-for="item in coach.roleName">{{item}} </span>-->
                  {{coach.roleName}}
                </th>
                <th width="200px" align="center" height="40px" >
                  从业时间
                </th>
                <th width="200px" align="center" height="40px" >
                  {{coach.workingTime}}年
                </th>
              </tr>
            </table>
          </el-main>
          <el-footer></el-footer>
        </el-container>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import coach from "../../../api/coach";
import gym from "../../../api/gym";

export default {
  name: "detail",
  data(){
    return{
      coach:{},
      gym:[]
    }
  },
  methods:{
    getList(){
      coach.getDetailById(this.$route.params.id).then(res=>{
        this.coach=res.data;
      })
    }
  },
  mounted() {
    this.getList();
  }
}
</script>

<style scoped>

</style>
